<template>
	<view >
		<!-- 商品轮播 -->
		<sw :swipers="sps" height="650" preview></sw>

		<!-- 商品基础信息 -->
		<bs-info :detail="detail"></bs-info>

		<!-- 滚动基础特性 -->
		<bs-attr :baseAttrs="baseAttrs"></bs-attr>

		<!-- 属性选择 -->
		<view class="p-2">
			<view class="bg-light-secondary border rounded" >
				<uni-list-item  @click="show('pinfo')">
					<view class="d-flex">
						<text class="mr-2 text-muted">已选</text>
						<text>火焰红 64G 标配</text>
					</view>
				</uni-list-item>
				<uni-list-item  @click="show('paddres')">
					<view class="d-flex">
						<text class="mr-2 text-muted">配送</text>
						<text class="mr-2">北京 东城区</text>
						<text class="main-text-color">现配</text>
					</view>
				</uni-list-item>
				<uni-list-item @click="show('sever')">
					<view class="d-flex a-center" >
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont iconlanlvtubiaozhizuomoban-01 mr-1"></view>
							包邮
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont iconlanlvtubiaozhizuomoban-01 mr-1"></view>
							特价
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont iconlanlvtubiaozhizuomoban-01 mr-1"></view>
							七天无理由退货
						</view>
					</view>
				</uni-list-item>
			</view>
		</view>
		<!-- 横向滚动评论 -->
		<view class="p-2">
			<scroll-view scroll-x class="scroll-row ">
				<view class="scroll-row-item rounded bg-light-secondary mr-2" style="width: 620rpx;height: 380rpx;" v-for="i in 4">
					<view class="d-flex a-center mb-2">
						<image src="../../static/imgs/7.png" style="width: 70rpx;height: 70rpx;" class="rounded-circle"></image>
						<view class="ml-2">
							<text class="font-md">小白</text>
							<text class="d-block font text-light-muted">2020-1-1</text>
						</view>
						<view class="iconfont iconyou1 text-light-muted font pl-1 ml-auto">123</view>
					</view>
					<text class="d-block font-md mb-2">评论</text>
					<view class="row">
						<view class="span24-8 px-2">
							<image src="../../static/imgs/2.png" style="height: 135rpx;" class="rounded"></image>
						</view>
						<view class="span24-8 px-2">
							<image src="../../static/imgs/2.png" style="height: 135rpx;" class="rounded"></image>
						</view>
						<view class="span24-8 px-2">
							<image src="../../static/imgs/2.png" style="height: 135rpx;" class="rounded"></image>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="d-flex j-center py-2 mt-2 text-primary">更多评论></view>
		</view>

		<!-- 商品详情 -->
		<view class="py-4">
			<u-parse className="uparse" :content="context" @preview="preview" @navigate="navigate"></u-parse>
		</view>
		<!-- 热门推荐 -->
		<card htitle="热门推荐">
			<glist :goods="goods" @goto="go"></glist>
		</card>
		

		<!-- 底部操作条 -->
		<view class="d-flex a-strentch bg-white a-center position-fixed bottom-0 right-0 left-0" style="height: 100rpx;z-index: 100;">
			<view class="d-flex  flex-column a-center text-muted line-h-sm " style="flex: 1;" hover-class="bg-light-secondary">
				<view class="iconfont iconaixin font-lg"></view>
				收藏
			</view>
			<view class="d-flex  flex-column a-center text-muted line-h-sm" style="flex: 1;" hover-class="bg-light-secondary">
				<view class="iconfont iconaixin font-lg"></view>
				加入购物车
			</view>
			<view class="d-flex j-center a-center font-md main-bg-color text-white" style="flex: 2;">立即购买</view>
		</view>
		
		<!-- 弹出框 -->
		<pops @hide="hide('pinfo')" :popupClass="pops.pinfo">
			<view class="d-flex a-center" style="height: 275rpx;">
				<image src="../../static/imgs/2.png" style="height: 180rpx; width: 180rpx;" class="border rounded"></image>
				<view class="pl-2">
					<price priceSize="font-lg" unitSize="font">2468</price>
					<text class="d-block">火焰红 64GB 标配 </text>
				</view>
			</view>
			<scroll-view scroll-y class="w-100" style="height: 680rpx;">
				<card :htitle="item.title" bod="" v-for="(item,i) in select" :key="i">
					<zcradio :label="item" :selected.sync="item.selected " ></zcradio>
				</card>
				<view class="d-flex j-sb a-center pt-2 border-top border-light-secondary">
					<text>购买数量</text>
					<uni-number :min="1" :value="detail.num" @change="detail.num = $event"></uni-number>
				</view>
			</scroll-view>
			
			<view class="d-flex j-center main-bg-color text-white font-md py-2" style="shape-margin: 120rpx;margin-left: -30rpx;margin-right: -30rpx;"
			hover-class="main-bg-hover-color" @tap.stop="hide('pinfo')"
			>加入购物车</view>
		</pops>
		
		<!-- 选择地址 -->
		<pops @hide="hide('paddres')" :popupClass="pops.paddres">
			<view class="d-flex a-center j-center font-md border-bottom border-light-secondary" style="height: 100rpx;">
				收货地址
			</view>
			<scroll-view scroll-y class="w-100" style="height: 835rpx;">
				<uni-list-item>
					<view class="iconfont iconaixin font-weight">小白</view>
					<view class="font text-light-muted">
						关东升广州市番禺区小码商城
					</view>
				</uni-list-item>
			</scroll-view>
			
			<view class="d-flex j-center main-bg-color text-white font-md py-2" style="shape-margin: 120rpx;margin-left: -30rpx;margin-right: -30rpx;"
			hover-class="main-bg-hover-color" @tap.stop="hide('paddres')"
			>新增收货地址</view>
		</pops>
		
		<!-- 服务说明 -->
		<pops @hide="hide('sever')" :popupClass="pops.sever">
			<view class="d-flex a-center j-center font-md border-bottom border-light-secondary" style="height: 100rpx;">
				服务说明
			</view>
			<scroll-view scroll-y class="w-100" style="height: 835rpx;">
				<view class="iconfont iconaixin main-text-color mr-2 pt-2">
					小码自营
				</view>
				<text class="text-light-muted font pl-4">
					七天无理由退货
				</text>
			</scroll-view>
			
			<view class="d-flex j-center main-bg-color text-white font-md py-2" style="shape-margin: 120rpx;margin-left: -30rpx;margin-right: -30rpx;"
			hover-class="main-bg-hover-color" @tap.stop="hide('sever')"
			>确定</view>
		</pops>
		
	</view>
</template>

<script>
	import sw from "@/components/index/swiper.vue"
	import bsInfo from "@/components/detail/baseinfo.vue"
	import bsAttr from "@/components/detail/baseroll.vue"
	import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue"
	import uParse from "@/components/uni-ui/uParse/src/wxParse.vue"
	import card from "@/components/index/card.vue"
	import glist from "@/components/index/glist.vue"
	import pops from "@/components/common/popup.vue"
	import price from "@/components/index/price.vue"
	import zcradio from "@/components/common/radio-group.vue"
	import uniNumber from "@/components/uni-ui/uni-number-box/uni-number-box.vue"
	
	export default {
		data() {
			return {
				select:[
					{
						title:"颜色",
						selected:0,
						list:[
							{name:"火焰红"},
							{name:"钻石黑"},
							{name:"粉尘白"},
							{name:"石墨绿"},
							
						]
					},
					{
						title:"容量",
						selected:0,
						list:[
							{name:"64GB"},
							{name:"128GB"}
						]
					},
					{
						title:"套餐",
						selected:0,
						list:[
							{name:"标配"},
							{name:"套餐一"},
							{name:"套餐二"}
						]
					}
				],
				pops:{
					pinfo:"none",
					paddres:"none",
					sever:"none"
				},
				//详情轮播
				sps: [{
						src: "/static/imgs/L1.jpg"
					},
					{
						src: "/static/imgs/L2.jpg"
					},
					{
						src: "/static/imgs/L3.jpg"
					}
				],
				detail: {
					title: "商品名称",
					desc: "描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述",
					price: 3500,
					num:1,
					max:100
				},
				// 滚动特性
				baseAttrs: [{
						icon: "iconlanlvtubiaozhizuomoban-01",
						title: "CPU",
						desc: "晓龙855八核"
					},
					{
						icon: "iconlanlvtubiaozhizuomoban-01",
						title: "CPU",
						desc: "晓龙855八核"
					},
					{
						icon: "iconlanlvtubiaozhizuomoban-01",
						title: "CPU",
						desc: "晓龙855八核"
					},
					{
						icon: "iconlanlvtubiaozhizuomoban-01",
						title: "CPU",
						desc: "晓龙855八核"
					},
					{
						icon: "iconlanlvtubiaozhizuomoban-01",
						title: "CPU",
						desc: "晓龙855八核"
					},
					{
						icon: "iconlanlvtubiaozhizuomoban-01",
						title: "CPU",
						desc: "晓龙855八核"
					}
				],
				goods: [{
						id: 1,
						name: "iqoo5 智能手机",
						text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
						nprice: 1234,
						oprice: 5678,
						src: "/static/imgs/26.jpg"
					},
					{
						id: 1,
						name: "iqoo5 智能手机",
						text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
						nprice: 1234,
						oprice: 5678,
						src: "/static/imgs/26.jpg"
					},
					{
						id: 1,
						name: "iqoo5 智能手机",
						text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
						nprice: 1234,
						oprice: 5678,
						src: "/static/imgs/26.jpg"
					},
					{
						id: 1,
						name: "iqoo5 智能手机",
						text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
						nprice: 1234,
						oprice: 5678,
						src: "/static/imgs/26.jpg"
					},
					{
						id: 1,
						name: "iqoo5 智能手机",
						text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
						nprice: 1234,
						oprice: 5678,
						src: "/static/imgs/26.jpg"
					},
					{
						id: 1,
						name: "iqoo5 智能手机",
						text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
						nprice: 1234,
						oprice: 5678,
						src: "/static/imgs/26.jpg"
					},
					{
						id: 1,
						name: "iqoo5 智能手机",
						text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
						nprice: 1234,
						oprice: 5678,
						src: "/static/imgs/26.jpg"
					},
					{
						id: 1,
						name: "iqoo5 智能手机",
						text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
						nprice: 1234,
						oprice: 5678,
						src: "/static/imgs/26.jpg"
					}
				],
				context:`
				<p>
				<img src="https://shopstatic.vivo.com.cn/vivoshop/commodity/20210115/20210115170056828283_original.jpg.webp" alt="">
				<img src="https://shopstatic.vivo.com.cn/vivoshop/commodity/20210115/20210115170056828283_original.jpg.webp" alt="">
				<img src="https://shopstatic.vivo.com.cn/vivoshop/commodity/20210115/20210115170056828283_original.jpg.webp" alt="">
				
				</p>
				`
			}
		},
		components: {
			sw,
			bsAttr,
			bsInfo,
			uniListItem,
			uParse,
			card,
			glist,
			pops,
			price,
			zcradio,
			uniNumber
		},
		// 监听返回事件
		onBackPress(){
			for(let k in this.pops){
				if(this.pops[k] !== 'none'){
					this.hide(k)
					return true
				}
			}
		},
		methods: {
			hide(i){
				this.pops[i]= 'hide'
				setTimeout(()=>{
					this.pops[i]= 'none'
				},200);
			},
			show(i){
				this.pops[i]= 'show'
			},
			preview(src,e){
				console.log(e)
			},
			navigate(href, e) {
				// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
				console.log("href: " + href);
			},
			go(){
				uni.navigateTo({
					url:"/pages/cart/detail"
				})
			}
		}
	}
</script>

<style>
	.uparse .p {
		padding: 0 !important;
	}

	.uparse view,
	.uparse uni-view {
		line-height: 0 !important;
	}
	._popup ._mask{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
	}
	._popup{
		z-index: 2000;
	
	}
	._mask{
		z-index: 2002;
		background: rgba(0,0,0,0.5);
	}
	._popup ._body{
		position: fixed;
		bottom: -1035rpx;
		width: 92%;
		padding: 0 4%;
		height: 1035rpx;
		z-index: 2003;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		border-radius:20rpx 20rpx 0 0 ;
	}
	._popup .show{
		display: block;
	}
	.show ._mask{
		animation: showMask 0.2s linear both;
	}
	.show ._body{
		animation: showBody 0.2s linear both;
	}
	._popup .hide{
		display: block;
	}
	.hide ._mask{
		animation: hideMask 0.2s linear both;
	}
	.hide ._body{
		animation: hideBody 0.2s linear both;
	}
	@keyframes showBody{
		0%{ transform: translateY(0);}
		100%{transform: translateY(-100%);}
	}
	@keyframes hideBody{
		0%{transform: translateY(-100%);}
		100%{transform: translateY(0);}
	}
	@keyframes showMask{
		0%{ opacity: 0;}
		100%{opacity: 1;}
	}
	@keyframes hideMask{
		0%{opacity: 1;}
		100%{opacity: 0;}
	}
	._popup.none{
		display: none;
	}
	
</style>
